<template>
    <div
        style="background-color: rgb(241, 241, 241);padding:5px;padding-right: 7px;min-height: 100vh; box-sizing: border-box;">
        <van-nav-bar title="文章详情" left-text="返回" left-arrow fixed @click="$router.back">
           
        </van-nav-bar>
        <div style="height: 50px;"></div>
        <!-- 文章详情 -->
        <div>
            <img :src="articleInfo?.picUrl" alt="" style="width: 100%;height: 200px;">
            <div
                style="text-align: center;padding:10px 20px;display: flex;flex-direction: column; justify-content: space-around;background-color: #fff;">
                <p style="font-weight: bold;font-size: 20px;color: #333;">{{ articleInfo?.title }}</p>
                <p style="font-size: 14px;color: #666;display: flex; justify-content: space-between;margin-top: 10px;">
                    <span>{{ articleInfo?.desc }}</span>
                    <span>{{ articleInfo?.createdAt }}</span>
                </p>
                <p style="margin-top: 10px;padding-bottom: 10px;">{{ articleInfo?.detail }}</p>
            </div>
        </div>
        <!-- 评论区 -->
        <div style="height: 40px;line-height: 40px;padding-left: 10px;margin-top: 20px;">评论:</div>
        <div style="background-color: #fff;width: 97%;border-radius: 10px;padding: 5px;margin-top: 10px;display: flex;"
            v-for="item in comments" :key="item.id">
            <img :src="item.user.avatar" alt="" style="width: 45px;height: 45px;border-radius: 50%;">
            <div style="margin-left: 10px;width: 280px;">
                <p style="display: flex;justify-content: space-between;">
                    <span>{{ item.user.name }}</span>
                    <span style="font-size: 14px;color: #999; ">{{ item.created_at }}</span>
                </p>
                <p style="margin-top: 10px;word-break: break-all;">{{ item.content }}</p>
            </div>
        </div>
        <div style="height:10vh;"></div>
        <!-- 底部动作栏 -->
        <div
            style="height: 45px;line-height:45px; background-color: #fff;position: fixed;bottom: 0;width: 100%;left: 0;box-shadow: 1px 1px 5px 1px #bdbdbd; display: flex;align-items: center;">
            <div style="width: 270px;display: flex;" @click="showCommentBar">
                <van-icon name="edit" size="30px" color="#666" style="margin-top: 7px;margin-left: 15px;" />
                <span style="margin-left: 5px;">评论</span>
                <input type="text"
                    style="height: 25px;width: 170px;margin-left: 10px;margin-top: 8px; border:1px solid #949494;border-radius: 7px;"
                    ref="input">
            </div>
            <van-icon :name="isPraise?'thumb-circle':'thumb-circle-o'" size="28px" :color="isPraise?'#1BAEAE':'#666'" style="margin-top: 3px;margin-left: 10px;" @click="thumb" :badge="articleInfo?.praise"/>

            <van-icon :badge="articleInfo?.collect" :name="`star${isCollect?'':'-o'}`" size="28px" :color="isCollect?'#1BAEAE':'#666'" style="margin-left: 20px;" @click="collect"/>

        </div>

        <!-- 评论文本域 -->
        <van-popup class="comment_box" safe-area-inset-bottom v-model:show="isShow" position="bottom">
            <div class="comment_header" style="display: flex;padding:15px 15px 0px 15px;justify-content: space-between;">
                <div>评论</div>
                <div :style="message.trim().length<=0?`color: #999;`:`color:#1BAEAE;`" @click="sendMessage" >发布</div>
            </div>
            <van-field label-align="top" v-model.trim="message" rows="5" type="textarea" maxlength="200" placeholder="请输入评论"
                show-word-limit />
        </van-popup>
    </div>
</template>

<script setup>
import { ref, reactive,watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getArticleDetail ,addComment,addPraise,delPraise,addCollection,delCollection} from '../../api/index'

let isShow = ref(false)
let route = useRoute()
let articleInfo = ref()
let comments = ref()
let message = ref('')
let isPraise=ref(false)
let isCollect=ref(false)
let input= ref()
//文章详情信息
if (route.params.articleId) {
    getArticleDetail({ id: route.params.articleId }).then(res => {
        if (res.code == 1) {
            articleInfo.value = res.data
            comments.value = res.data.comments?.reverse()
            isPraise.value=res.data.is_praise
            isCollect.value=res.data.is_collect
         //  console.log(res.data)
        }
    })
}
//显示评论
function showCommentBar() {
    isShow.value = true

}
watch(isShow,()=>{
    if(isShow.value==false){
        input.value.value=''
    }
})

// 发布评论
function sendMessage(){
    addComment({type:2,content:message.value,object_id:articleInfo.value.id}).then(res=>{
        if(res.code==1){
             isShow.value=false
             message.value=''
            getArticleDetail({ id: route.params.articleId }).then(res=>{
                comments.value = res.data.comments?.reverse()
            })
        }
    })
}
//点赞
function thumb(){
   
    if(isPraise.value){
        delPraise({type:2,object_id:route.params.articleId}).then(res=>{
            if(res.code==1){
                
                getArticleDetail({ id: route.params.articleId }).then(res=>{
                isPraise.value=res.data.is_praise
                articleInfo.value.praise=res.data.praise
            })
            }
        })
    }else{
        addPraise({type:2,object_id:route.params.articleId}).then(res=>{
        if(res.code==1){
            getArticleDetail({ id: route.params.articleId }).then(res=>{
                isPraise.value=res.data.is_praise
                articleInfo.value.praise=res.data.praise
            })
        }
    })
    }
    
}
//收藏
function collect(){
    if(isCollect.value){
        delCollection({type:2,object_id:route.params.articleId}).then(res=>{
            if(res.code==1){
                
                getArticleDetail({ id: route.params.articleId }).then(res=>{
                isCollect.value=res.data.is_collect
               articleInfo.value.collect=res.data.collect
            })
            }
        })
    }else{
        addCollection({type:2,object_id:route.params.articleId}).then(res=>{
        if(res.code==1){
            getArticleDetail({ id: route.params.articleId }).then(res=>{
                isCollect.value=res.data.is_collect
                articleInfo.value.collect=res.data.collect
            })
        }
    })
    }
}
</script>

<style scoped>
     :deep() .van-nav-bar .van-icon{
    color: #1BAEAE;
    font-weight: bolder;
}
    :deep() .van-nav-bar .van-nav-bar__text{
    color: #1BAEAE;
    font-weight: bolder;
    }
    :deep() .van-badge{
        background-color: #fff;
        color: rgb(169, 169, 169);
        left: 14px;
    }
</style>